<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户信息</title>
    <!-- layUI的核心CSS文件 -->
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/layui-v2.5.7/layui/css/layui.css"/>
    <!-- layUI的核心JS文件 -->
    <script src="${pageContext.request.contextPath}/static/layui-v2.5.7/layui/layui.js" type="text/javascript"
            charset="UTF-8"></script>
    <script src="${pageContext.request.contextPath}/static/script/jquery-1.7.2.js" type="text/javascript"
            charset="UTF-8"></script>
</head>
<body>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
</script>
<script>
    layui.use('form', function () {
        var form = layui.form;
    });
</script>

<!-- 头部导航栏 -->
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><a style="color: #009688;">龙洞闲置购物系统</a></div>

        <!-- 头部区域（可配合layui已有的水平导航） -->

        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item">
                <a href="ShowALLGoods">首页</a>
            </li>
            <li class="layui-nav-item layui-this" style="user-select: none">
                修改资料
            </li>
        </ul>
        <%@include file="../common/head.jsp"%>
    </div>
</div>

<!-- 用户信息 -->

<div class="layui-row">
    <div class="layui-col-md6 layui-col-lg-offset3"
         style="margin-top: 80px;border: 1px solid gray; padding: 20px;margin-bottom: 20px;">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>个人信息</legend>
        </fieldset>
        <%--        <form class="layui-form layui-form-pane" action="updateUserHead" enctype="multipart/form-data" method="post" >--%>
        <%--            <input type="hidden" name="uid" value="${user.uid}">--%>
        <%--            <input type="hidden" name="uimg_path" value="${user.uimg_path}">--%>
        <%--            <div class="layui-col-lg-offset1 layui-col-md10" style="margin-top:10px;">--%>
        <%--                <label class="layui-form-label">当前头像</label>--%>
        <%--                <c:if test="${empty sessionScope.uimg_path}">--%>
        <%--                    <img id="test" type="file" src="${pageContext.request.contextPath}/static/images/default_head.jpg" class="layui-nav-img"--%>
        <%--                         style="width: 50px; height: 50px;margin-left: 15px;">--%>
        <%--                </c:if>--%>
        <%--                <c:if test="${not empty sessionScope.uimg_path}">--%>
        <%--                <a id="head" href="#"><img id="headImg" src="${user.uimg_path}" class="layui-nav-img"--%>
        <%--                     style="width: 50px; height: 50px;margin-left: 15px;"></a>--%>
        <%--                </c:if>--%>
        <%--                <input id="upload" type="file" name="imgfile" hidden>--%>
        <%--                <!--定义一个需要打开的图片 img标签-->--%>
        <%--                <div id="tong" style="display: none;">--%>
        <%--                    <img src="${user.uimg_path}"  style="width: 200px;height: auto">--%>
        <%--                </div>--%>
        <%--                <script>--%>
        <%--                    layui.use('layer', function(){--%>
        <%--                        var layer = layui.layer;--%>
        <%--                    });--%>
        <%--                    var head = document.getElementById("head");--%>
        <%--                    var upload = document.getElementById("upload");--%>
        <%--                    var tong = document.getElementById("tong");--%>
        <%--                    var headImg = document.getElementById("headImg");--%>
        <%--                    head.onclick = function () {--%>
        <%--                        layer.open({--%>
        <%--                            type: 1,--%>
        <%--                            title: false,--%>
        <%--                            closeBtn: 0,--%>
        <%--                            area: '200px',--%>
        <%--                            skin: 'layui-layer-nobg', //没有背景色--%>
        <%--                            shadeClose: true,--%>
        <%--                            content: $('#tong'),--%>
        <%--                            btn: ['更改头像']--%>
        <%--                            ,yes: function(index, layero){--%>
        <%--                                upload.click();--%>
        <%--                                layer.close();--%>
        <%--                            }--%>
        <%--                        });--%>
        <%--                    }--%>
        <%--                    upload.onchange = function () {--%>
        <%--                        console.log(upload.value);--%>
        <%--                        headImg.src = upload.value;--%>
        <%--                    }--%>
        <%--                </script>--%>
        <%--                <button class="layui-btn" lay-submit lay-filter="save">保存</button>--%>
        <%--            </div>--%>
        <%--        </form>--%>
        <%--            <script>--%>
        <%--                layui.use('upload', function () {--%>
        <%--                    var upload = layui.upload;--%>
        <%--                    //执行实例--%>
        <%--                    var uploadInst = upload.render({--%>
        <%--                        elem: '#test' //绑定元素--%>
        <%--                        , url: '${pageContext.request.contextPath}/static/images/' //上传接口--%>
        <%--                        , done: function (res) {--%>
        <%--                            //上传完毕回调--%>
        <%--                        }--%>
        <%--                        , error: function () {--%>
        <%--                            //请求异常回调--%>
        <%--                        }--%>
        <%--                    });--%>
        <%--                });--%>
        <%--            </script>--%>
        <form class="layui-form layui-form-pane" action="updateUserInfo" enctype="multipart/form-data" method="post">
            <input type="hidden" name="uid" value="${user.uid}">
            <input type="hidden" name="uimg_path" value="${user.uimg_path}">
            <div class="layui-col-lg-offset1 layui-col-md10" style="margin-top:10px;">
                <label class="layui-form-label">当前头像</label>
                    <c:if test="${empty sessionScope.uimg_path}">
                    <img id="test" type="file" src="${pageContext.request.contextPath}/static/images/default_head.jpg"
                         class="layui-nav-img"
                         style="width: 50px; height: 50px;margin-left: 15px;">
                    </c:if>
                    <c:if test="${not empty sessionScope.uimg_path}">
                    <img src="${user.uimg_path}" class="layui-nav-img"
                         style="width: 50px; height: 50px;margin-left: 15px;">
                    </c:if>
                    <input type="file" name="imgfile">
            </div>
                <div class="layui-col-lg-offset1 layui-col-md10 " style="margin-top:10px;">
                    <label class="layui-form-label">学号</label>
                    <div class="layui-input-block">
                        <input type="text" name="user.unumber" required lay-verify="required" autocomplete="off"
                               class="layui-input" value="${user.unumber}" disabled>
                    </div>
                </div>


                <div class="layui-col-lg-offset1 layui-col-md10" style="margin-top:10px;">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="uname" required lay-verify="required" autocomplete="off"
                               class="layui-input" value="${user.uname}" maxlength="20">
                    </div>
                </div>

                <div class="layui-col-lg-offset1 layui-col-md10" style="margin-top:10px;">
                    <label class="layui-form-label">院系</label>
                    <div class="layui-input-block">
                        <select name="ufaculty" lay-verify="required">
                            <option>${user.ufaculty}</option>
                            <option value="管理学院">管理学院</option>
                            <option value="应用数学学院">应用数学学院</option>
                            <option value="国际贸易学院">国际贸易学院</option>
                            <option value="马克思学院">马克思学院</option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-lg-offset1 layui-col-md10" style="margin-top:10px;">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-inline"  style="width: 300px;">
                        <input id="phone" type="text" name="uphone" required lay-verify="required" autocomplete="off"
                               class="layui-input" value="${user.uphone}">
                    </div>
                    <label id="phoneTips" hidden style="color: red">电话号码格式错误</label>
                </div>

                <div class="layui-col-lg-offset1 layui-col-md10" style="margin-top:10px;">
                    <label class="layui-form-label">我的余额</label>
                    <div class="layui-input-block">
                        <input type="text" name="ubalance" lay-verify="required" autocomplete="off"
                               class="layui-input" value="${user.ubalance}" disabled>
                    </div>
                </div>

                <div class="layui-col-lg-offset1 layui-col-md10 layui-form-item layui-form-text"
                     style="margin-top: 10px;">
                    <label class="layui-form-label">个性签名</label>
                    <div class="layui-input-block">
                        <textarea name="usign" placeholder="请输入个性签名,限80字符" class="layui-textarea" id="usign"
                                  maxlength="80" style="resize: none">${user.usign}</textarea>

                    </div>
                </div>

                <div class="layui-col-lg-offset3 layui-col-md10" style="margin-top:30px;">
                    <div class="layui-input-block">
                        <button id="submit" class="layui-btn" lay-submit lay-filter="save">保存</button>
                    </div>
                </div>
            <script>
                let judge=true;
                var phoneNumber = document.getElementById("phone");
                var phoneTips = document.getElementById("phoneTips");
                let submit = document.getElementById("submit");
                phoneNumber.onblur = function() {
                    var phone = document.getElementById('phone').value;
                    if(!(/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(phone))){
                        phoneTips.hidden = false;
                        judge=false;
                    }
                    else{
                        phoneTips.hidden = true;
                        judge=true;
                    }
                    if (!judge) {
                        submit.disabled = true;
                        submit.classList.add("layui-btn-disabled");
                    } else if (judge) {
                        submit.disabled = false;
                        submit.classList.remove("layui-btn-disabled");
                    }
                }
            </script>
        </form>


    </div>
</div>

</body>
</html>
